<template>
  <div class="div">
    <div>
      <p>按钮</p>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
    <div>
      <p>禁用状态按钮</p>
      <el-row>
        <el-button disabled>默认按钮</el-button>
        <el-button type="primary" disabled>主要按钮</el-button>
        <el-button type="success" disabled>成功按钮</el-button>
        <el-button type="info" disabled>信息按钮</el-button>
        <el-button type="warning" disabled>警告按钮</el-button>
        <el-button type="danger" disabled>危险按钮</el-button>
      </el-row>
    </div>
  </div>
  <div class="div">
    <div style="width: 200px;">
      <p>可清空输入框</p>
      <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable>
      </el-input>
    </div>
    <div>
      <p>密码框</p>
      <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
    </div>
    <div>
      <p>计数器</p>
      <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    </div>
    <div>
      <p>选择选择器</p>
        <el-select v-model="value" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
    </div>
    <div>
      <p>时间选择器</p>
      <div class="block">
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
  </div>
  <div class="div">
    <div>
      <p>个人信息展示</p>
      <el-button type="primary" @click="showAdd = true">
        查看详细信息
      </el-button>
      <el-dialog
          v-model="showAdd"
          title="Tips"
          width="60%"
      >
        <el-descriptions title="详细信息列表" direction="vertical" :column="4" border>
          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
          <el-descriptions-item label="备注">
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
    <div>
      <p>提示消息按钮</p>
      <el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>
    </div>
    <div>
      <p>确认按钮</p>
      <el-button type="primary" @click="open">确认提示</el-button>
    </div>
    <div>
      <p>页头</p>
      <el-page-header @back="goBack" content="详情页面">
      </el-page-header>
    </div>
  </div>
  <div style="margin-top: 50px">
    <el-table
        :data="tableData"
        stripe
        style="width: 40%">
      <el-table-column
          prop="date"
          label="日期"
          width="">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
  <div >
    <el-pagination
        v-model:current-page="pageNO"
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="100"
        @current-change="findByItem"
    />
  </div>


</template>

<script>

export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      },],

      value: '',

      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },],

      showAdd:false,

      input:"",
    }
  },
  methods: {
    goBack(){
      this.$message({
        message:'放回上一页或首页',
        type:'success'
      })
    },
    open1() {
      this.$message('这是一条消息提示');
    },
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },

    open3() {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      });
    },

    open4() {
      this.$message.error('错了哦，这是一条错误消息');
    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>
.div{
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
</style>